require("../css/index.less")

document.ready(function () {
  window.$utils.addTabbar("index")
  //获取dom
  let rankNum = document.querySelector("#rankNum")//今日排名
  let punchDay = document.querySelector("#punchDay")//打卡天数
  let badgeNum = document.querySelector("#badgeNum")//徽章
  let todayPunch = document.querySelector("#todayPunch")//今日打卡
  console.log(badgeNum);

  //轮播图插件
  var mySwiper = new Swiper('.swiper-container', {
    loop: true, // 循环模式选项
    //自动播放
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  //从本地存储中获取用户数据
  let userId = JSON.parse(window.localStorage.getItem("user")).userId
  console.log("用户:", userId);
  
//发送请求获取数据
  getindexData();
  function getindexData() {
    axios.get(window.$utils.BASE_URL + `/headPageInfo?userId=${userId}`)
      .then(function (res) {
        let ret = res.data
        if (ret.status == 0) {
          //调用函数,渲染数据
          render(ret.data)
        }
      }).catch(function (err) {
        console.log(err);
      })
  }
  //封装数据渲染
  function render(obj) {
    rankNum.textContent = obj.rank;
    punchDay.textContent = obj.punchIn;
    badgeNum.textContent = obj.insigniaNum
    todayPunch.textContent = obj.isPunch === "false" ? "今日打卡" : "已打卡"

    flag = obj.isPunch === "false" ? false : true
  }
  //定义一个变量,表示已经打卡
  let flag = true;
  todayPunch.addEventListener("click", function () {
    if (flag) {
      window.$utils.toast("cuowu", "已经打过卡了")
    } else {
      //没有打卡就发送请求
      axios.get(window.$utils.BASE_URL + `/clockIn?userId=${userId}`)
        .then(function (res) {
          console.log(res.data);
          let ret = res.data;
          if (ret.status == 0) {
            //打卡成功，刷新
            getindexData()
            //提示  
            window.$utils.toast("duigou","打卡成功");
          } else if (ret.status == 1) {
            //打卡失败
            window.$utils.toast("cuowu","打卡失败");
          }
        }).catch(function (error) {
          console.log(error);

        })
    }
  })
})